<template>
  <header>
    <div class="l-content">
      <el-button
        @click="handleMenu"
        plain
        icon="el-icon-menu"
        size="mini"
      ></el-button>
      <!-- <h3>首页</h3> -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          :to="{ path: item.path }"
          v-for="item in tags"
          :key="item.path"
        >
          {{ item.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="mini">
        <div><img :src="userImage" /></div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Vheader",
  data() {
    return {
      userImage: require("../assets/logo.png"),
    };
  },
  methods: {
    handleMenu() {
      this.$store.commit("CollapseMenu");
    },
    logout(){
      this.$store.commit("clearToken")
      this.$store.commit("clearMenu")
      this.$router.push("/login")
    }
  },
  computed: {
    ...mapState({
      tags: (state) => state.tab.tabsList,
    }),
  },
};
</script>

<style lang="less">
.el-header {
  background-color: rgb(148, 148, 148) !important;
}
header {
  margin: 0;
  padding: 0;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .l-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      padding-left: 20px;
    }
  }
  .r-content {
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    div {
      border-radius: 50%;
      height: 40px;
      width: 40px;
      overflow: hidden;
      img {
        width: 40px;
        cursor: pointer;
      }
    }
  }
  .el-breadcrumb {
    margin-left: 20px;
  }
}
</style>